
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="box">点击切换颜色</div>
    <script>
        var box = document.getElementById("box");
        box.style.color = "red";

        box.onclick = function(){
        //以下两种方法，哪一种能修改颜色，思考不同类型的区别

        //方法一 是否能修改？ 能 引用数据类型
        var AA = box;
        console.log(typeof AA); //object
        AA.style.color = "blue";

          // //方法二 是否能修改？ 不能 基本数据类型
          // var BB = box.style.color;
          // console.log(typeof BB); //string
          // BB = "blue"; 
        }

    </script>
  </body>
</html>